<template>
  <view>
    <cu-custom :isBack="true" bgColor="rgba(0,0,0,0)">
      <view slot="content">
        {{ liveInfo.title || "加载中" }}
      </view>
    </cu-custom>
    <view class="liveplay">
      <view class="live_toast">
        <!-- <cover-image src="liveInfo.mainImage.fileUrl"></cover-image> -->
        {{ state }}
      </view>
      <live-player
        class="video"
        mode="live"
        @netstatus="netState"
        :src="liveurl.flv"
        :autoplay="true"
      ></live-player>
    </view>
    <view class="live_hold">
      <text>直播开始时间：{{ liveInfo.startTime }}</text>
    </view>

    <view class="live_title">
      <view>
        <text>{{ liveInfo.summary || "ART新店直击！年度最期待新物披露" }}</text>
        <text>直播预告</text>
      </view>
    </view>

    <view class="live_tab">
      <view>
        <text
          v-for="(item, index) in tabArr"
          :key="index"
          @click="selectTab(index)"
          :class="index == tabAtiveIndex ? 'active' : ''"
          >{{ item }}</text
        >
      </view>
    </view>

    <!-- <view class="hudong" v-if="tabAtiveIndex == 0">
      <view>
        <image src="" mode="widthFix" />
        <view>
          <text>主持人</text>
          <view>
            <text
              >大家好，欢迎来到CIFF直播间。 本次直播将为大家展现年度最期待
              的新品展出。 直播时间：05月12日 14:30</text
            >
          </view>
        </view>
      </view>
    </view> -->

    <view class="morecard" v-if="tabAtiveIndex == 1">
      <view
        v-for="(item, index) in liveInfo.relations"
        :key="index"
        @click="jump(item)"
      >
        <image :src="item.launchImage.fileUrl" mode="aspectFill" />
        <view class="stateicon">
          <image
            src="../../static/img/liveing.gif"
            mode="widthFix"
            v-if="item.state == 2"
          />
          <text>{{ mocardState(item) }}</text>
        </view>
        <view class="contant_text">
          <text>{{ item.summary }}</text>
          <text>{{ item.startTime }}</text>
        </view>
      </view>
    </view>

    <!-- <view style="height: 112rpx;" v-if="tabAtiveIndex == 0"></view> -->
    <!-- <view class="talk" v-if="tabAtiveIndex == 0">
      <view>
        <textarea
          name=""
          id=""
          placeholder="说点什么"
          :fixed="true"
          :auto-height="true"
        ></textarea>
      </view>
      <button @click="send" size="mini">发送</button>
    </view> -->
  </view>
</template>

<script>
import { getLiveUrl, getLiveInfo } from "../../api/api";
export default {
  data() {
    return {
      tabAtiveIndex: 0,
      tabArr: ["直播简介", "更多"],
      id: "", //当前直播间id
      liveInfo: {},
      liveurl: {},
    };
  },
  // computed: {
  //   state() {
  //     if (this.liveInfo.status == 1) {
  //       return "预告中";
  //     } else if (this.liveInfo.status == 2) {
  //       return "直播中";
  //     } else if (this.liveInfo.status == 3) {
  //       return "直播结束";
  //     } else {
  //       return "";
  //     }
  //   },
  //   mocardState() {
  //     return (item) => {
  //       if (item.status == 1) {
  //         return "直播预告";
  //       } else if (item.status == 2) {
  //         return "直播中";
  //       } else if (item.status == 3) {
  //         return "直播结束";
  //       }
  //     };
  //   },
  // },
  // async onLoad({ id }) {
  //   let info = await getLiveInfo(id);
  //   if (info[1].data.code == "000000") {
  //     this.liveInfo = info[1].data.data;
  //   }
  //   let url = await getLiveUrl(id);
  //   if (url[1].data.code == "000000") {
  //     this.liveurl = url[1].data.data;
  //   }
  //   console.log(url);
  // },
  // methods: {
  //   selectTab(index) {
  //     this.tabAtiveIndex = index;
  //   },
  //   //网络状态
  //   netState() {},
  //   jump(item) {
  //     uni.navigateTo({
  //       url: "/pages/live/live?id=" + item.id,
  //     });
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.colllive {
  width: 100%;
  height: 68rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 10rpx !important;
  position: absolute;
  z-index: 9999;
  left: -135rpx !important;
  image {
    width: 40rpx !important;
    position: absolute;
    left: 0 !important;
    z-index: 99999;
  }
}
.liveplay {
  width: 100%;
  height: 340rpx;
  position: relative;
  .video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .live_toast {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    background: rgba(43, 43, 43, 0.5);
    border-radius: 29px;
    padding: 10rpx 27rpx;
    z-index: 999;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 254, 254, 1);
  }
}
.live_hold {
  width: 750rpx;
  background: linear-gradient(
    90deg,
    rgba(179, 30, 34, 1) 0%,
    rgba(255, 0, 0, 1) 100%
  );
  padding: 23rpx 0;
  padding-left: 48rpx;
  > text {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 254, 254, 1);
  }
}
.live_title {
  background-color: #fff;
  width: 100%;
  > view {
    width: 100%;
    padding-left: 38rpx;
    padding-top: 35rpx;
    padding-bottom: 45rpx;
    > text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      background-color: #fff;
      &:first-child {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: rgba(36, 36, 36, 1);
        padding-bottom: 36rpx;
      }
    }
  }
}
.live_tab {
  width: 100%;
  background-color: #fff;
  margin-top: 14rpx;
  > view {
    padding-top: 40rpx;
    padding-left: 38rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    > text {
      margin-right: 80rpx;
      font-size: 26rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      position: relative;
      padding-bottom: 40rpx;
      cursor: pointer;
      color: rgba(36, 36, 36, 1);
    }
  }
}
.active {
  position: relative;
  color: #242424 !important;
  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: " ";
    width: 100%;
    height: 4rpx;
    background: rgba(255, 0, 0, 1);
    border-radius: 2rpx;
  }
}
.talk {
  width: 100%;
  background-color: #fff;
  padding: 20rpx 0;
  padding-left: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  view {
    padding: 20rpx 0;
    background: rgba(243, 243, 243, 1);
    > textarea {
      width: 564rpx;
      height: 65rpx;
      background: rgba(243, 243, 243, 1);
      border-radius: 8rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
  > button {
    height: 65rpx;
    line-height: 65rpx;
    background-color: #fff;
  }
}
.textarea-placeholder {
  margin-left: 40rpx;
  padding-left: 40rpx;
  line-height: 65rpx;
}
button::after {
  border: none;
}
.hudong {
  margin-left: 38rpx;
  > view {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    > image {
      width: 77rpx;
      height: 77rpx;
      background-color: aqua;
      flex-shrink: 0;
      border-radius: 50%;
    }
    > view {
      margin-left: 32rpx;
      > text {
        margin-top: 10rpx;
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(117, 117, 117, 1);
      }
      > view {
        padding: 30rpx 25rpx;
        background-color: #fff;
        margin-top: 20rpx;
        border-radius: 8rpx;
        max-width: 468rpx;
        position: relative;
        &::after {
          content: " ";
          position: absolute;
          top: 20rpx;
          left: -25rpx;
          height: 0;
          border-top: 16px solid #ffffff;
          border-left: 16px solid transparent;
        }
        > text {
          font-size: 28rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          text-align: left;
          line-height: 34rpx;
        }
      }
    }
  }
}
.morecard {
  padding-left: 37rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border-top: 2px solid #eee;
  > view {
    box-shadow: 0px 5rpx 18rpx 0px rgba(232, 232, 232, 0.59);
    background-color: #fff;
    margin-bottom: 24rpx;
    width: 330rpx;
    position: relative;
    .stateicon {
      position: absolute;
      left: 17rpx;
      top: 23rpx;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10rpx 15rpx;
      border-radius: 5rpx;
      > image {
        width: 22rpx;
      }
      > text {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        letter-spacing: 2rpx;
      }
    }
    &::after {
      position: absolute;
      content: " ";
      left: 17rpx;
      top: 23rpx;
    }
    &:nth-child(2n) {
      margin-left: 18rpx;
    }
    > image {
      width: 100%;
      height: 185rpx;
      background-color: red;
    }
    .contant_text {
      padding-left: 14rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding-top: 20rpx;
      padding-bottom: 30rpx;

      > text {
        &:first-child {
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: rgba(36, 36, 36, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 330rpx;
          letter-spacing: 2rpx;
        }
        &:nth-child(2) {
          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: rgba(117, 117, 117, 1);
        }
      }
    }
  }
}
</style>
